<template>
  <div class="sub-filter" v-if="filterData && !filterLoading">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <el-radio-group v-model="filterData.selectedBrand" @change="handlerRadio">
          <el-radio v-for="brand in filterData.brands" :key="brand.id" :label="brand.id" :title="brand.name">{{ brand.name }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="item" v-for="p in filterData.saleProperties" :key="p.id">
      <div class="head ellipsis">{{ p.name }}：</div>
      <div class="body">
        <el-radio-group v-model="p.selectedProp" @change="handlerRadio">
          <el-radio  v-for="attr in p.properties" :key="attr.id" :label="attr.name" :title="attr.name">{{ attr.name }}</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
  <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
  </div>
  
</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
export default {
  name: 'SubFilter',
  setup(props,{emit}) {
    const route = useRoute()
    const filterData = ref(null)
    const filterLoading = ref(false)
    watch(() => route.params.id, async (newVal, oldVal) => {
      if (newVal && route.path == ('/category/sub/' + newVal)) {
        filterLoading.value = true
        const { result } = await findSubCategoryFilter(newVal)
        // 品牌
        result.selectedBrand = null
        result.brands.unshift({ id: null, name: '全部' })
        // 销售
        result.saleProperties.forEach(p => {
          p.selectedProp = '全部'
          p.properties.unshift({ id: null , name: '全部' })
        })
        filterData.value = result
        filterLoading.value = false
      }
    }, { immediate: true })
    const handlerRadio = (id) => {
      const filterParams = {
        brandId: filterData.value.selectedBrand,
        attrs:[]
      }
      filterData.value.saleProperties.forEach(item=>{
        if(item.selectedProp){
          let obj = {}
          obj.groupName = item.name
          obj.propertyName = item.selectedProp === '全部' ? null : item.selectedProp
          filterParams.attrs.push(obj)
        }
      })
      emit('filter-change',filterParams)
    }
    return {
      filterData,
      filterLoading,
      handlerRadio
    }
  }
}
</script>
<style scoped lang='scss'>
::v-deep .el-radio__inner{
  display: none !important;
  // opacity: 0;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: $xtxColor !important;
}
::v-deep .el-radio__label{
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  &:hover{
    color: $xtxColor;
  }
}
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  padding-top: 20px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      color: #999;
      width: 80px;
      line-height: 50px;
    }
    .body {
      flex: 1;
    }
  }
}
.xtx-skeleton {
  padding: 10px 0;
}
</style>